<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <link rel="stylesheet" href="./选择器.css">
</head>

<body>
    <!-- header -->
    <div class="header">
        <a href="./选择器.html">
            <p>选择器</p>
        </a>
        <a href="./盒子.html" target="_blank">
            <p>盒子</p>
        </a>
    </div>
    <!-- header end -->
    <!-- body -->
    <div class="container">
        <h2>元素选择器</h2>
        <p>段落元素。</p>
        <h2>类选择器</h2>
        <div class="btn">点击我</div>
        <h2>ID选择器示例</h2>
        <p id="unique-element">具有唯一ID</p>
        <h2>属性选择器</h2>
        <form>
            <label for="name">姓名:</label>
            <input type="text" id="name" name="name">
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email">
            <input type="checkbox" id="remember">
        </form>
        <h2>伪类选择器</h2>
        <a href="#">点击链接</a>
        <br>
        <button>点击按钮</button>
    </div>
    <!-- body end -->
</body>

</html>